<template>
  <div class="list-wrap">
    <div class="list-goods">
      <div class="list-title">
        <div class="list-title-left">
          <p class="text">商品排行榜</p>
          <img class="img1" src="../assets/images/l-hot.png" />
        </div>
        <div class="list-title-right">
          <p>查看完整榜单 ></p>
        </div>
      </div>
      <div class="goods-list-content">
        <div class="goods-item" v-for="(item, index) in list" :key="index">
          <goodsItem :item="item" :index="index" />
        </div>
      </div>
    </div>
    <div class="list-host">
      <div class="list-title">
        <div class="list-title-left">
          <p class="text">主播排行榜</p>
          <img class="img2" src="../assets/images/l-jb.png" />
        </div>
        <div class="list-title-right">
          <p>查看完整榜单 ></p>
        </div>
      </div>
      <div class="host-list-content">
        <div class="host-list-title">
          <div>排名</div>
          <div>昵称</div>
          <div>粉丝量</div>
          <div>单品最佳销量</div>
          <div>七日总销售额</div>
        </div>
        <div class="table">
          <div class="table-item" v-for="(item, index) in hostList" :key="index">
            <div class="table-item-left">
              <div class="table-item-flag">
                <img v-if="index === 0" src="../assets/images/l-first-jp.png" />
                <img v-else-if="index === 1" src="../assets/images/l-two-jp.png" />
                <img v-else-if="index === 2" src="../assets/images/l-three-jp.png" />
                <div v-else class="table-item-number">{{index+1}}</div>
              </div>
              <img class="host-header" :src="item.img"  />
            </div>
            <div>{{item.name}}</div>
            <div>{{item.fans}}</div>
            <div>{{item.sell}}</div>
            <div>{{item.seventSell}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import goodsItem from '~/components/goodsItem.vue' // 商品列表
export default {
  async fetch({store}) {
    await store.commit('setIndex', 2)
  },
  layout: 'loginlayouts',
  components: {
    goodsItem
  },
  data() {
    return {
      list:[],
      hostList: [
        {
          name: '窗器有棵树',
          fans: '5w',
          sell: '100w',
          seventSell: '3000w',
          img: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4150802370,1902002068&fm=111&gp=0.jpg'
        },
        {
          name: '窗器有棵树',
          fans: '5w',
          sell: '100w',
          seventSell: '3000w',
          img: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4150802370,1902002068&fm=111&gp=0.jpg'
        },
        {
          name: '窗器有棵树',
          fans: '5w',
          sell: '100w',
          seventSell: '3000w',
          img: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4150802370,1902002068&fm=111&gp=0.jpg'
        },
        {
          name: '窗器有棵树',
          fans: '5w',
          sell: '100w',
          seventSell: '3000w',
          img: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4150802370,1902002068&fm=111&gp=0.jpg'
        },
        {
          name: '窗器有棵树',
          fans: '5w',
          sell: '100w',
          seventSell: '3000w',
          img: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4150802370,1902002068&fm=111&gp=0.jpg'
        },
      ]
    }
  },
  methods:{
    getRankShop(){
      this.$axios.$post('rankInfo').then(res => {
         if(res.status === 200 ){
           this.list = res.obj.goodsDOS
         }else{
            this.$message.warning(res.msg)
          }
      })
      .catch(error => {
          this.$message.warning('请求失败')
      })
    }
  },
  mounted(){
    this.getRankShop()
  }
}
</script>

<style scoped>
  .list-wrap {
    width: 1200px;
    margin:  0 auto;
  }
  .list-goods {
    margin-top: 26px;
  }
  .list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list-title-left {
    display: flex;
    align-items: center;
  }
  .list-title-left  .text {
    color: 0;
    font-size: 24px;
  }
  .list-title-left img {
    margin-left: 15px;
  }
  .list-title-left .img1 {
    width: 20px;
    height: 26px;
  }
  .list-title-left .img2 {
    width: 19px;
    height: 23px;
  }
  .list-title-right {
    cursor: pointer;
    color: #333;
    font-size: 14px;
  }
  .goods-item {
    margin-bottom: 27px;
    margin-right: 27px;
  }
  .goods-list-content {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    width: 1250px;
  }
  .host-list-content {
    margin-top: 25px;
  }
  .list-host {
    margin-top: 73px;
    margin-bottom: 100px;
  }
  .host-list-title {
    display: flex;
    background: #fafafa;
    height: 48px;
    font-size: 18px;
    color: #333;
    align-items: center;
    justify-content: space-around;
  }
  .host-list-title div {
    width: 20%;
    text-align: center;
  }
  .table-item {
    height: 80px;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    text-align: center;
    align-items: center;
    color: #333333;
    font-size: 18;
  }
  .table-item>div {
    width: 20%;
  }
  .host-header {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .table-item-left {
    display: flex;
    align-items: center;
  }
  .table-item-flag img {
    width: 30px;
    height: 36px;
    margin-left: 100px;
  }
  .table-item-number {
    margin-left: 100px;
    color: #0096e6;
    font-size: 18px;
    width: 30px;
    height: 36px;
    line-height: 36px;
    text-align: center;
  }
  .host-header {
    margin-left: 52px;
  }
</style>
